<template>
  <a-modal title="选择用户" style="width: 300px" v-model="visible" :destroyOnClose="true" :footer="null">
    <div style="margin-bottom: 10px">
      <a-input-search @search="getList()" placeholder="输入昵称搜索" v-model="name" allowClear enter-button />
    </div>

    <a-table
      rowKey="id"
      :columns="userColumns"
      :data-source="loadUserData"
      :pagination="{
        total: this.totalCount,
        showSizeChanger: false,
        onChange: this.getList,
      }"
    >
      <span slot="baseinfo" slot-scope="text, record">
        <img style="width: 40px; heigth: 40px; border-radius: 3px; margin-right: 5px" :src="record.logo" />
        <span :length="20" tooltip>{{ record.name }}</span>
      </span>

      <span slot="action" slot-scope="text, record">
        <a-button type="primary" size="small" @click="onSelect(record)"> 选择 </a-button>
      </span>
    </a-table>
  </a-modal>
</template>

<script>
import { selectWorkerList } from '@/api/marketing/serviceHome'

export default {
  data() {
    return {
      userColumns: [
        {
          title: 'ID',
          dataIndex: 'id',
        },
        {
          title: '用户信息',
          scopedSlots: { customRender: 'baseinfo' },
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
        },
      ],

      loadUserData: [],
      totalCount: 0,
      visible: false,
      name: '',
    }
  },

  async created() {
    this.getList()
  },

  methods: {
    async getList(pageNo = 1) {
      const hide = this.$message.loading('加载中', 0)
      let { name } = this

      const res = await selectWorkerList({
        name,
        pageSize: 10,
        pageNo,
      })
      if (res.code == 0) {
        let { totalCount, data } = res.data
        this.totalCount = totalCount
        this.loadUserData = data
      }
      hide()
    },

    // 选择用户
    onSelect(item) {
      this.$emit('select', item)
      // this.visible = false
    },
  },
}
</script>
